<template>
  <!-- 曲线对比-折线图 -->
  <div class="lineWrapper">
    <!-- 加载中 -->
    <!-- style="text-align: center;height:4rem;line-height:4rem" -->
    <div class="loadDiv"
         v-show="loadShow">
      <a-spin size="large" />
    </div>

    <!-- class="maxHeight300" -->
    <div id="container"
         :style="{'opacity': data.length > 0 && !loadShow ? '1' : '0'}"></div>

    <!-- 暂无数据 -->
    <noData class="noData"
            :message="message"
            v-show="data === '' && !loadShow" />

  </div>
</template>

<script>
import { Line } from '@antv/g2plot'
import noData from './noData'
import Com from '../../.././common/js/com.js'
import MixinSD from '../../../store/sd/mixinsSd.js'
export default {
  mixins: [MixinSD],
  props: ['ajaxParam', 'scrollTop'], /* ajaxParam: 接口入参参数  scrollTop: 页面滚动值 */
  data () {
    return {
      Eparam: 'PM2.5,PM1,PM10,TSP,AQI',
      wry: '',
      codes: '',
      category: [],
      gkzArr: [],
      date: [],
      data: '',
      message: '',
      oldData: [],
      loadShow: true // 加载中
    }
  },
  created () {
    this.loadShow = true // 加载中
    if (this.ajaxParam.code && this.ajaxParam.code.length !== 0) {
      this.category = this.ajaxParam.category
      this.codes = this.ajaxParam.code
      this.Eparam = this.ajaxParam.Eparam
      this.gkzArr = this.ajaxParam.gkzArr
      this.getHistoryData(this.ajaxParam, this.scrollTop) // 获取历史数据
    } else {
      this.data = ''
      this.message = '请先选择设备1！'
      this.loadShow = false
    }
  },
  methods: {
    initChart: function (ajaxParam, scrollTop) {
      this.loadShow = true // 加载中
      this.category = ajaxParam.category
      this.codes = ajaxParam.code
      this.Eparam = ajaxParam.Eparam
      this.gkzArr = ajaxParam.gkzArr
      if (ajaxParam.code && ajaxParam.code.length !== 0) {
        this.getHistoryData(ajaxParam, this.scrollTop)
      } else {
        this.data = ''
        this.message = '请先选择设备2！'
        this.loadShow = false
      }
    },
    getHistoryData (ajaxParam, scrollTop, codeString) { // 获取历史数据
      if (ajaxParam.code === '') {
        this.data = ''
        this.message = '请先选择设备3！'
        this.loadShow = false
      } else {
        var minTime = ajaxParam.start
        var maxTime = ajaxParam.end
        var ts = Com.stringTime(new Date())
        var data = {
          account: window.localStorage.getItem('account'),
          codes: ajaxParam.code,
          datetype: ajaxParam.timeLx,
          max_time: maxTime,
          min_time: minTime,
          params: this.Eparam,
          token: window.localStorage.getItem('token'),
          ts
        }
        const that = this
        const wry = ajaxParam.wry
        // console.log(JSON.stringify(data), '-------折线图入参')
        this.getHistoryDeviceLogSD(data).then(function (value) {
          const result = value.data.data
          //   console.log(result, '-----------折线图出参')
          if (result !== '') {
            const data = []
            that.oldData = result
            if (that.oldData) {
              for (var key in that.oldData) {
                if (that.oldData[key].length > 0) {
                  that.oldData[key].forEach(item => {
                    const json = {}
                    json.date = item.time
                    json.value = item[wry] ? Number(item[wry]) : 0
                    json.category = item.code
                    if (item[wry]) { data.push(json) }
                  })
                }
              }
              if (data.length === 0) {
                that.data = ''
                that.message = '暂无数据！'
                that.loadShow = false
              } else {
                that.data = data
                that.initChartDom(that.scrollTop)
              }
            } else {
              that.data = ''
              that.message = '暂无数据！'
              that.loadShow = false
            }
          } else {
            that.data = ''
            that.message = value.data.meta.message
            that.loadShow = false
          }
        })
      }
    },
    initChartDom: function (scrollTop) {
      document.getElementById('bodyWrapperId').scrollTop = scrollTop
      const that = this
      if (this.chart) {
        that.chart.destroy()
        that.createChart()
        that.chart.render()
        that.loadShow = false // 加载中
      } else {
        that.createChart()
        that.chart.render()
        that.loadShow = false // 加载中
      }
    },
    createChart: function () {
      const gkzArr = this.ajaxParam.gkzArr
      const data = this.data
      this.chart = new Line('container', {
        data,
        color: ['#D67AF0', '#FFB03A', '#5EC6FF', '#5AD8A6', '#5B8FF9', '#E25F5F', '#C6D687', '#B83B5E'], // 自定义折线颜色
        xField: 'date',
        yField: 'value',
        seriesField: 'category',
        legend: { position: 'top-right' },
        tooltip: {
          showMarkers: false,
          formatter: (datum) => {
            return {
              name: datum.category,
              value: datum.value + 'μg/m³'
            }
          }
        },
        xAxis: {
          nice: true,
          label: {
            offset: 10,
            style: {
              fill: 'rgba(0,0,0,0.65)',
              fontSize: 11
            },
            formatter: (name) => {
              const index = name.indexOf(' ')
              if (index !== -1) {
                return name.substring(5, 16)
              } else {
                const date = name.split('-')
                return date[1] + '-' + date[2]
              }
            }
          }
        },
        yAxis: {
          grid: {
            line: {
              style: {
                stroke: '#e9e9e9',
                lineWidth: 1,
                lineDash: [4, 3],
                strokeOpacity: 1,
                cursor: 'pointer'
              }
            }
          },
          label: {
            style: {
              fill: 'rgba(0,0,0,0.65)',
              fontSize: 11
            }
          }
        },
        slider: { // 滚动滑块
          start: 0,
          end: 1,
          smooth: true // 曲线是否平滑
        },
        animation: { // 图形动画
          appear: { // 配置图表第一次加载时的入场动画
            animation: 'wave-in', // 动画效果
            duration: 600 // 动画执行时间
          }
        },
        lineStyle: ({ category }) => {
          if (category === gkzArr[0].code) {
            return {
              lineWidth: 4
            }
          }
          return {
            lineWidth: 2
          }
        }
      })
    }
  },
  components: {
    noData
  }
}
</script>

<style lang="less" scoped>
.lineWrapper {
  // padding: 0 0.24rem 0.24rem 0.24rem;
  position: relative;
  padding-bottom: 0.24rem;
  margin: 0 0.24rem;
  height: 3.6rem;
  width: calc(100% - 0.48rem);
  text-align: left;
  .loadDiv {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 6%;
  }
  #container {
    width: 100%;
    height: 3.6rem;
  }
  .noData {
    position: absolute;
    top: 0;
  }
}
</style>
